<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="container">
        <h2>Milk</h2>
        <div class="loader">
            <span style="--i:0"></span>
            <span style="--i:1"></span>
            <span style="--i:2"></span>
            <span style="--i:3"></span>
            <span style="--i:4"></span>
            <span style="--i:5"></span>
            <span style="--i:6"></span>
            <span style="--i:7"></span>
            <span style="--i:8"></span>
            <span style="--i:9"></span>
            <span style="--i:10"></span>
            <span style="--i:11"></span>
        </div>
    </div>
    <svg>
        <!-- 过滤 -->
        <filter id = 'gooey'>
            <!-- <feGaussianBlur>元素基于输入图元中提供的标准偏差，向图形添加平滑的模糊 -->
                <!-- in:in属性标识给定过滤器原语的输入。
                stdDeviation:它定义了平滑模糊操作的标准偏差。默认值为0。
                edgeMode:它表示输入层边的多余像素。 -->
                <!-- 重要的是后面的参数 -->
                <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
            <!-- 这里调整了aa和c4,a是透明度,c是常量偏移 -->
                <feColorMatrix Values="
            1 0 0 0 0
            0 1 0 0 0
            0 0 1 0 0
            0 0 0 20 -10
            "/>
        </filter>
    </svg>
</body>
</html>